<template>
  <div class="page-container">
    <div ref="con" class="container-chart">
      <!-- 第一个页面 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seriesData: [],
      //图例数组
      name: [],
      chart: "",
    };
  },
  mounted() {
    //页面一加载就调用接口
    this.getData();
    // this.initEchart()
    //创建一个屏幕大小的监听事件
    window.addEventListener("resize", () => {
      //屏幕控制的函数
      this.screen();
    });
  },
  methods: {
    //封装一个屏幕控制大小的函数
    screen() {
      //可视宽度
      let width = this.$refs.con.offsetWidth;
      //设置字体的大小号
      //这个公式是我们自己测试出来
      let num = (width / 100) * 6;
      //改变数据图形的大小
      this.chart.resize();
      //重新去创建一个配置项
      let option = {
        title: {
          textStyle: {
            fontSize: num,
          },
          series: {
            //num 字体的大小 利用字体的大小去乘以4 并不是固定公式，而是这么测试，相对数据变化有规律
            radius: num * 4,
          },
        },
      };
      //重新设置一下配置项
      this.chart.setOption(option);
    },
    getData() {
      this.$axios.get("/TotalAreaCropsProportion").then((res) => {
        //整体数据
        this.seriesData = res.data.map((item) => ({
          name: item.name,
          value: item.value,
        }));
        //取出图例数组
        this.name = res.data.map((item) => item.name);
        console.log(this.seriesData, "统计面积");
        this.$nextTick(() => {
          this.initEchart();
          this.screen()
        });
      });
    },
    initEchart() {
      let myChart = this.$echarts.init(this.$refs.con);
      this.chart = myChart;
      let options = {
        //定义饼盘的颜色
        color: ["yellow", "pink", "red", "orange", "blue"],
        //标题
        title: {
          text: "种植农作物面积统计",
        },
        //提示框组件
        tooltip: {
          // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: "item",
        },
        // 如果什么都不填任何信息就是直接渲染全部图例
        legend: {
          // data:[
          //     {
          //         name:'哈哈'
          //     }
          // ]
          data: this.name,
          top: 40,
          left: "left",
          // orient:'vertical' 垂直排序图例
        },
        // legend:{
        //     //图例中的data一定要和数据列中的data一致，因为它可以去控制数据的显示隐藏
        //     data:[{
        //         name:'水产'
        //     }]
        // },
        //数据列
        series: {
          type: "pie", //饼图
          // 饼图的数据组成 需要有name 名字（分类） value（占比）
          //center 里面可以设置两个值，是圆心
          // center:50
          //
          //radius  是设置圆的大小 radius:100  或者你也可以设置百分比
        //   radius: 200,
         radius: "45%",//如果要做屏幕的控制，图形用百分比去控制大小
        //  color: {
        //       // x,y 起点  x1,y1 终点 横向的渐变 。纵向 x2,y2["#6EABDA", "#2D5A7D"],
              
        //       colorStops: [
        //         {
        //           offset: 0,
        //           color: "#ffccee",
        //         },
        //         {
        //           offset: 1,
        //           color: "#ffddss22",
        //         },
        //       ],
        //     },
          data: this.seriesData,
        },
      };
      myChart.setOption(options);
    },
  },
};
</script>

